<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅记录</title>
    <script src="./js/jquery-2.1.0.js"></script>
    <!--  格式化时间的工具  -->
    <script src="./js/date_fns.min.js"></script>
    <style>
        body {
            background: url("./img/bg5.png") no-repeat;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin: 0;
            padding: 20px;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table, th, td {
            border: 1px solid #ccc;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<h2>图书借阅记录</h2>
<table>
    <thead>
    <tr>
        <th>书名</th>
        <th>作者</th>
        <th>价格</th>
        <th>借阅时间</th>
        <th>是否归还</th>
    </tr>
    </thead>
    <tbody id="bookList">
    <!-- 这里用JavaScript动态生成表格内容 -->
    </tbody>
</table>
<button type="button" onclick="btn()">返回</button>

<script>
    <!--页面加载事件 -->
    $(function () {
        //获取图书列表
        $.ajax({
            type: "GET",
            url: "/api/book/allInfo",
            data: {
                "uid": JSON.parse(sessionStorage.getItem("user")).uid
            },
            dataType: "JSON",
            success: function (bookresult) {
                console.log(bookresult);
                var bookList = bookresult.data;
                if (bookresult.code == 20000) {
                    var tbody = document.getElementById("bookList");
                    let date = new Date();
                    bookList.forEach(function (infos) {
                        var row = document.createElement("tr");
                        date = infos.borrow.btime;
                        row.innerHTML = `
                            <td>${infos.bname}</td>
                            <td>${infos.author}</td>
                            <td>${infos.price}</td>
                            <!-- 将传来的UTC时间格式化 -->
                            <td>${dateFns.format(date, "YYYY-MM-DD HH:mm:ss")}</td>
                            <td>${infos.borrow.rtime == null ? '未归还' : '已归还'}</td>
                    `;
                        tbody.appendChild(row);
                    })
                }else {
                    alert('暂未查询到您有借阅记录呢~');
                    //跳转菜单
                    location.assign("menu.html");
                }
            }
        })
    });


    <!-- 跳转首页 -->
    function btn() {
        location.assign("menu.html");
    }
</script>
</body>
</html>